<template>
  <view class="content">
    <view class="head">
      <view @click="gologin" class="uerl">
        <image v-show="isLogin" :src="isLogin ? userInfo.avatar || JSON.parse(userInfo).avatar : ''" mode="">
        </image>
        <image v-show="!isLogin" src="" mode=""></image>
        <view class="uerl_text">
          <text>{{
            isLogin
              ? userInfo.nickname || JSON.parse(userInfo).nickname
              : "点击登录·注册"
          }}</text>
          <view class="complete" data-eventsync="true" @tap="setPerfect">完善信息</view>
        </view>
      </view>
    </view>
    <view class="service">
      <view style="justify-content: space-between" class="con_ser">
        <view @click="goServic(item.id)" class="con_item" v-for="(item, index) in service" :key="item.id">
          <image :src="item.image" mode=""></image>
          <view>{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view @click="goPage(item)" v-for="item in bootList" :key="item.id" class="bottom_item">
        <view style="display: flex; align-items: center">
          <image class="imageLogo" mode="aspectFit" :src="item.image"></image>
          <text>{{ item.name }}</text>
          <button class="button" v-if="item.id === 2" @error="onimError" :data-im-id="dataImId" open-type="im"></button>
        </view>
        <image class="imageJin" src="@/static/image/my/arrow.jpg"></image>
      </view>
    </view>
    <view class="bottom" v-if="isAuthor==1">
      <view @click="godetail()" class="bottom_item">
        <view style="display: flex; align-items: center">
          <image class="imageLogo" mode="aspectFit" src="/static/image/my/All.png"></image>
          <text>订单管理</text>
        </view>
        <image class="imageJin" src="@/static/image/my/arrow.jpg"></image>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { setQualifications, setTiktokIm,isxhfcheck } from "@/api/my.js";
import { setProfile } from "@/api/user.js";
export default {
  data() {
    return {
      service: [
        { id: 0, name: "全部服务", image: "/static/image/my/All.png" },
        { id: 0, name: "待付款", image: "/static/image/my/due.png" },
        { id: 0, name: "待预约", image: "/static/image/my/toBeBooked.png" },
        { id: 0, name: "待核销", image: "/static/image/my/InService.png" },
      ],
      bootList: [
        {
          id: 0,
          name: "服务地址",
          image: "/static/image/my/site.png",
          path: "/pages/address/address",
          isLogin: true,
        },
        {
          id: 2,
          name: "联系客服",
          image: "/static/image/my/service.png",
          path: "",
          isLogin: false,
        },
        {
          id: 3,
          name: "用户协议",
          image: "/static/image/my/explain.png",
          path: "/pages/userAgtreement/userAgtreement",
          isLogin: false,
        },
        {
          id: 4,
          name: "隐私协议",
          image: "/static/image/my/inRegardTo.png",
          path: "/pages/agreement/agreement",
          isLogin: false,
        },
        {
          id: 5,
          name: "资质展示",
          image: "/static/image/my/certification.png",
          path: "/pages/qualifications/qualifications",
          isLogin: false,
        },
      ],
      aptitude: "",
      dataImId: "64405815494",
      isAuthor:''
    };
  },
  computed: {
    ...mapGetters("user", ["isLogin", "userInfo"]),
  },
  onLoad() {
    this.goQualifications();
    this.getTiktokIm();
    this.isshowxhf()
  },
  methods: {
    ...mapActions("user", ["setUserInfo"]),
    setPerfect() {
      tt.getUserProfile({
        success: (res) => {
          const { avatarUrl, province, nickName, city } = res.userInfo;
          setProfile({
            username: nickName,
            nickname: nickName,
            avatar: avatarUrl,
          }).then((res) => {
            if (res.code === 1) {
              this.setUserInfo();
            } else {
              this.$showToast(res.mag);
            }
          });
        },
      });
    },
    getTiktokIm() {
      setTiktokIm().then((res) => {
        if (res.code === 1) {
          this.dataImId = res.data;
        }
      });
    },
    onimError(e) {
      console.log(e);
    },
    goServic(id) {
      if (!this.isLogin) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return false;
      }
      uni.navigateTo({
        url: "/pages/serviceOrder/serviceOrder?id=" + id,
      });
    },
    goQualifications() {
      setQualifications().then((res) => {
        if (res.code === 1) {
          this.aptitude = res.data;
        }
      });
    },
    gologin() {
      if (this.isLogin) return false;
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    goPage(item) {
      if (!this.isLogin) {
        uni.navigateTo({
          url: "/pages/login/login",
        });
        return false;
      }
      if (item.id != 2) {
        uni.navigateTo({
          url: item.path,
        });
      }
    },
    godetail() {
      uni.navigateTo({
        url: "/pages/xhforderList/xhforderList",
      });
    },
    isshowxhf(){
      isxhfcheck().then((res)=>{
        this.isAuthor=res.data.isAuthor

      })
    }
  },
};
</script>

<style lang="scss" scoped>
/deep/ .uni-popup__wrapper {
  width: 100%;
}

.pop_image {
  width: 85vw;
  margin: 0 auto;

  .pop_del {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    top: -80rpx;
    z-index: 999;
    right: 6rpx;
  }

  .imga {
    width: 100%;
  }
}

.bottom {
  width: 93%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.04);
  margin-top: 40rpx;
  padding: 20rpx 0;
  padding-bottom: 20rpx;

  .bottom_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx 28rpx 32rpx;
    border-bottom: 2rpx solid #e3e3e3;
    position: relative;
    margin-top: 30rpx;

    .customerService::after {
      border: none;

      button::after {
        border: none;
        background-color: none;
      }

      button {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: inherit;
        z-index: 99999;
      }
    }

    .customerService {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: inherit;
      z-index: 99999;
    }
  }

  .bottom_item:last-child {
    border-bottom: none !important;
  }

  .imageLogo {
    width: 40rpx;
    height: 40rpx;
    margin-right: 16rpx;
  }

  .imageJin {
    width: 25rpx;
    height: 25rpx;
  }

  text {
    font-size: 26rpx;
    color: #1c2023;
  }

  .button::after {
    border: none;
    background-color: none;
  }

  .button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: inherit;
    z-index: 99999;
  }
}

.service {
  width: 93%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.04);
  margin-top: -100rpx;
  padding: 20rpx 0;

  .con_ser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    margin-top: 30rpx;

    .con_item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 120rpx;

      button::after {
        border: none;
        background-color: none;
      }

      button {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: inherit;
        z-index: 99999;
      }

      image {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 15rpx;
      }

      view {
        width: 120rpx;
        font-size: 28rpx;
        text-align: center;
        margin-top: 8rpx;
        font-family: PingFang SC;
        color: #1c2023;
        font-weight: 400;
      }
    }
  }
}

.head {
  height: 320rpx;
  padding: 0 25rpx;
  background-color: #fea614;

  .rl_settings {
    text-align: center;
    height: fit-content;
    padding-top: 80rpx;

    .aptitude {
      font-size: 26rpx;
      color: #333;
      padding: 10rpx 20rpx;
      border-radius: 26rpx;
      background-color: #f1ae08;
      margin-top: 20rpx;
    }

    image {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .uerl {
    display: flex;
    align-items: center;
    padding-top: 32rpx;
    height: fit-content;

    .uerl_text {
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;
    }

    .complete {
      color: #ffffff;
      font-size: 27rpx;
      background-color: #f1ae08;
      border-radius: 33rpx;
      width: fit-content;
      margin-top: 20rpx;
    }

    image {
      width: 110rpx;
      height: 110rpx;
      border-radius: 100rpx;
      border: 4rpx solid #fff;
      margin-right: 10rpx;
    }

    text {
      font-weight: 600;
      font-size: 30rpx;
      letter-spacing: 2rpx;
    }
  }
}
</style>
